
<template>
  <el-container>

    <el-aside width="250px" class="aside-menu">
      <header class="tree-menu-title">产品目录 <el-button size="mini" @click="saveNode({data: {}}, 'add')" type="primary" class="pull-right">添加</el-button></header>
      <el-tree
      :highlight-current="true"
      :data="treeData"
      :props="{
        label: 'name',
        children: 'childList'
      }"
      node-key="id"
      accordion
      auto-expand-parent
      :default-checked-keys="selectKey"
      @node-click="selectCatalog">
    <span class="custom-tree-node" slot-scope="{ node, data }">
        <span :title="node.label" class="product-label">{{ node.label }}</span>
        <span class="actions">
          <el-button
            type="primary"
            size="mini"
            @click.stop="() => saveNode(node, 'add')"
            circle
            icon="el-icon-plus">

          </el-button>
          <el-button
            type="info"
            size="mini"
            @click.stop="() => saveNode(node)"
            circle
            icon="el-icon-edit">

          </el-button>
          <el-button
            type="danger"
            size="mini"
            @click.stop="() => remove(node, data)"
            circle
            icon="el-icon-minus">

          </el-button>
        </span>
      </span>
    </el-tree>
    </el-aside>
    <el-main class="pt0 pr0">
      <Filters :currentCatalog="currentCatalog"/>
    </el-main>
  </el-container>

</template>

<script>
  import Filters from './menu';

  export default {
    data () {
      return {
        currentCatalog: {},
        treeData: [],
        selectKey: [],
        treeProps: {
          children: 'children',
          label: 'label'
        }
      };
    },

    created () {
      this.getProductCatalog();
    },
    components: {
      Filters
    },
    computed: {

    },
    methods: {
      // 获取产品目录树
      getProductCatalog () {
        this.$http({
          url: this.$http.adornUrl('/prm-os-srv-prod/queryProductDirList'),
          method: 'post'
        }).then(data => {
          this.treeData = [...data.data] || []
          if (data.data&&data.data.length > 0) {
            this.currentCatalog = data.data[0]
            this.selectKey = [data.data[0].id]
          }
          console.log(this.currentCatalog)
        })
      },
      selectCatalog (node) {
        this.currentCatalog = node
        console.log(this.currentCatalog)
      },
      saveNode ({data}, action) {
        this.$prompt('请输入目录名称', '', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputValue: action === 'add' ? '目录名称' : data.name,
          inputPlaceholder: '请输入目录名称',
          inputValidator (value) {
            if (!value || !(value.trim())) {
              return '请输入目录名称'
            }
          },
          inputErrorMessage: '请输入目录名称'
        }).then(({value}) => {
          let url = '/prm-os-srv-prod/updateProductDir';
          let params = {
            name: value,
            id: data.id,
            parentId:data.parentId
          }
          if (action === 'add') {
            url = '/prm-os-srv-prod/saveProductDir';
            params = {
              name: value,
              parentId: data.id
            }
          }
          this.$http({
            url: this.$http.adornUrl(url),
            method: 'post',
            data: this.$http.adornData(params)
          }).then(() => {
              this.getProductCatalog();
          })
        })
      },
      remove ({data}) {
        this.$confirm('是否删除该目录', '', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          return this.$http({
            url: this.$http.adornUrl('/prm-os-srv-prod/delete'),
            method: 'post',
            data: this.$http.adornData({
              id: data.id
            })
          })
        }).then(() => {
            this.getProductCatalog();
        })
      }
    }
  }
</script>

<style scoped>
  .aside-menu {
    padding: 15px;
    border-radius: 4px;
    position: relative;
    box-shadow: 5px 0px 15px 0px rgba(0, 0, 0, 0.1);
  }

  .pr0 {
    padding-right: 0;
  }

  .pt0 {
    padding-top: 0;
  }

  .tree-menu-title {
    font-size: 18px;
    text-align: center;
    line-height: 28px;
    margin-bottom: 15px;
  }

  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }

  .el-tree >>> .el-tree-node {
    padding: 5px 0;
  }

  .actions >>> .el-button{
    font-size: 12px;
    transform: scale(.95);
    padding: 5px;
    margin-left: 0;
  }

</style>

<style lang="scss" scoped>

.custom-tree-node{
  .product-label{
    width:6em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

</style>
